import React, { memo ,shallowequal} from 'react'
import {useSelector} from 'react-redux'
import {
  RankingHeaderWrapper
} from './style';
import {formatMonthDay} from 'utils/format-utils'
import SongOperationBar from '@/components/song-operation-bar'
export default memo(function HNRankingHeader() {

  const {playlistDetail} = useSelector(state => ({
    playlistDetail : state.getIn(["ranking", "playlistDetail"]),
  }),shallowequal)
 
  return (
    playlistDetail ? (
      <RankingHeaderWrapper>
      <div className="image">
        <img src={playlistDetail.coverImgUrl} alt="" />
      </div>
      
      <div className="info">
        <div className="title">{playlistDetail.name}</div>
        <div className="time">
          <i className="clock sprite_icon2"></i>
          <div>最近更新：{formatMonthDay(playlistDetail.updateTime)}</div>
            
        </div>
        <SongOperationBar favorTitle={`(${playlistDetail.subscribedCount})`}
                            shareTitle={`(${playlistDetail.shareCount})`}
                            downloadTitle="下载"
                            commentTitle={`(${playlistDetail.commentCount})`}/>
      </div>
    </RankingHeaderWrapper>
    ):(<div></div>)
  )
})
